<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="../js/vue-router.min.js"></script>
    <style>
        .router-link-exact-active, .router-link-active{
            background: #f50;
            border:1px solid darkblue;
    
        }
        </style>
</head>

<body>
    <div id="app">
        <h1>{{title}} </h1>

        <my-head></my-head>

        <hr>

        <!-- 5. 路由出口  在哪里显示组件 -->
        <div style="width: 80%;height:auto;padding: 20px;border: 2px solid brown;">
            <router-view></router-view>
        </div>

        <!-- 6.声明导航 -->
        <a href="#/home">首页</a>
        <router-link to="/home">首页1</router-link>
        <router-link to="/find">发现</router-link>
        <router-link to="/mine">我的</router-link>
        <router-link to="/login">登录</router-link>

    
    </div>

    <template id="home">
        <div>
            <h2>home --- home ---home</h2>
        </div>
    </template>

    <template id="find">
        <div>
            <h2>Find - Find - Find </h2>
        </div>
    </template>

</body>

<script>
    //注册全局的组件
    const head = {
        template: "<header>head ---> 学习路由起步</header>"
    }
    Vue.component("myHead", head)

    // 0.如果使用模块化机制编程,导入Vue和VueRouter,要调用Vue.use(VueRouter)

    // 1.定义(路由)组件. 组件选项对象
    const Home = {
        template: "#home"
    }

    const Mine = {
        template:"<h2>个人中心</h2>"
    }

    const Find = {
        template:"#find",
        data(){
            return { }
        }
    }

    const Login = {
        template:"<div>Login - Login-Login </div>"
    }

    const NotFound = {
        template:"<div><h3>NotFound 404 - 404 - 404 </h3></div>"
    }
    

    // 2. 定义路由  定义路由和组件的映射关系  path 和 component 一一映射
    const routes = [
        {
            path:"/home",
            component:Home
        },
        {
            path:"/mine",
            component:Mine
        },
        {
            path:"/find",
            component:Find
        },
        {
            path:"/login",
            component:Login
        },
        {
            path:"/404",
            component:NotFound
        },
        {
            path:"*",
            component:NotFound
        }
    ]


    // 3.创建 router 实例
    const router = new VueRouter({
        routes
    })


    // 4.挂载根实例
    const vm = new Vue({
        router, // this.$router


        data: {
            title: "route 路由起步"
        },
        motheds: {

        },
        mounted() {
            document.querySelectorAll("title")[0].innerHTML = this.title
        }
    }).$mount("#app")
</script>

</html>